<script setup lang="ts">
import { useUserStore } from "@/hooks/usePinia";
import { userMenu, BaseHeadPortrait } from "./data.ts";
import { ref } from "vue";

const userStore = useUserStore();
const menuShow = ref(false);
const _self = this
const changeMenuType = () => {
  menuShow.value = !menuShow.value;
};
</script>

<template>
  <div class="user-info horizontal-layout" @click="changeMenuType">
    <el-avatar
      class="user-info__avatar"
      :size="30"
      :src="userStore.userInfo.avatar || BaseHeadPortrait"
    />
    <div class="vertical-layout">
      <p class="user-info__name">
        {{ userStore.userInfo.name }}
      </p>
      <p class="user-info__author">
        {{ '系统管理员' || userStore.userInfo.author }}
      </p>
    </div>
  </div>
  <div class="user-menu" :class="{ 'user-menu-show': !menuShow }">
    <p
      class="user-menu__item"
      v-for="(item, index) in userMenu"
      :key="`user-menu__${index}`"
      @click="item.handle(null, changeMenuType)"
    >
      {{ item.label }}
    </p>
  </div>
</template>

<style lang="scss" scoped>
.user-info {
  cursor: pointer;
  &__avatar {
    margin-right: 10px;
  }
  p {
    font-size: 12px;
  }
}
.user-menu {
  position: absolute;
  top: 53px;
  right: 10px;
  opacity: 1;
  height: 100%;
  transition: height 1s ease-out;
  &__item {
    width: 100px;
    text-align: center;
    line-height: 12px;
    font-size: 14px;
    background-color: #f3f3f3;
    padding: 10px;
    cursor: pointer;
    &:hover {
      color: #f3f3f3;
      background-color: #c3c3c3;
    }
  }
}
.user-menu-show {
  display: block;
  opacity: 1;
  height: 0;
  overflow: hidden;
  transition: opacity 1s ease-out;
}
</style>
